<script setup lang='ts'>
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import pageStyle1 from "../../components/pageStyle1.vue";
import { memberHook } from "../../hooks/memberHooks";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { CaretBottom } from "@element-plus/icons-vue";

const route = useRoute();

const _memHook = memberHook();

const pageTitle = ref<string>("成员操作");

onMounted(() => {
  let type = route.query.type;
  if (type == "1") {
    pageTitle.value = "修改成员";
    ElMessage("成员信息回显");
  } else {
    pageTitle.value = "添加成员";
  }
});

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();

const ruleForm = reactive({
  sex: null,
  username: "admin",
  phone: "18282484911",
  email: "412csd@qq.com",
  name: "aaaanbdssdas",
  imageUrl:
    "https://cn.bing.com/images/search?view=detailV2&ccid=4YSF8%2bio&id=9EF130881F279369380F43C155A6DF8E81A594FD&thid=OIP.4YSF8-ioIDzXno2g-pC34AHaQC&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.e18485f3e8a8203cd79e8da0fa90b7e0%3frik%3d%252fZSlgY7fplXBQw%26riu%3dhttp%253a%252f%252fpic1.zhimg.com%252f50%252fv2-ce874ec539038c1a2541c991a00cf3e2_hd.jpg%26ehk%3d9wgmvpc46hm2v3BObqSj%252bHq7MgGz30VthyH1a8sx1m8%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=1559&expw=720&q=%e5%bc%a0%e4%bc%9f&simid=608028131054733012&FORM=IRPRST&ck=DA65FE764C9CC81D1C49A465BD13EA31&selectedIndex=0&idpp=overlayview&ajaxhist=0&ajaxserp=0",
  password: "a9bf64944c0d6b65ed47bcd875810765",
  salt: "b27f224e-633d-4386-b971-26f3e8422767",
  createTime: "2023-05-03T15:36:41.000+00:00",
  updateTime: "2023-05-05T07:40:40.000+00:00",
  status: 0,
  signature: "",
  images: "",
  introduction: "",
  workTime: 0,
  genius: "",
  display: 0,
  classesTime: 0,
  adminId: 15,
  sort: 2,
  rePwd: "",
});

// 表单验证规则
const rules = reactive<FormRules>({
  username: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  name: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  email: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  appKey: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  appMchId: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  payKey: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  refundTime: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  refundRatio: [
    { required: true, message: "输入不能为空！", trigger: "blur" },
    {},
  ],
  pointPrice: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  pointRatio: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const roleOptions = [
  { value: "option1", label: "option1" },
  { value: "option2", label: "option2" },
];
</script>
<!-- 模型 -->
<template>
  <div class="MemberUpdate">
    <pageStyle1 :title="pageTitle">
      <template #main>
        <div class="memberForm">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="180px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-divider content-position="left"
              ><el-icon><CaretBottom /></el-icon>填写信息</el-divider
            >
            <el-form-item label="成员名称：" prop="username">
              <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="成员姓名：" prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="ruleForm.email" />
            </el-form-item>
            <el-form-item label="角色：" prop="appKey">
              <el-select v-model="value" class="m-2" placeholder="Select">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="所属场馆：" prop="payKey">
              <el-checkbox-group v-model="ruleForm.salt">
                <el-checkbox label="Option A" />
                <el-checkbox label="Option B" />
                <el-checkbox label="Option C" />
                <el-checkbox label="disabled" />
                <el-checkbox label="selected and disabled" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="是否为销售人员：" prop="refund">
              <el-radio-group v-model="ruleForm.refund">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-divider content-position="left"
              ><el-icon><CaretBottom /></el-icon>其他设置</el-divider
            >

            <el-form-item label="登录密码：" prop="name">
              <el-input v-model="ruleForm.password" />
            </el-form-item>
            <el-form-item label="确认密码：" prop="name">
              <el-input v-model="ruleForm.rePwd" />
            </el-form-item>
            <el-form-item label="备注信息：" prop="name">
              <el-input
                v-model="ruleForm.signature"
                :rows="2"
                type="textarea"
                placeholder="Please input"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </pageStyle1>
  </div>
</template>

<style scoped>
.memberForm {
  padding: 50px 100px;
}
</style>